<template>
	<view>
		<tabsTop tabName="我的零钱"></tabsTop>
		<view class="marquee-container flex align-center">
			<view class="marquee-text">
				使用提现功能需添加一张支持提现的储蓄卡，完成绑卡后即可提现。
			</view>
		</view>
		<!-- 图、零钱、明细 -->
		<view class="details text-center m-5">
			<image :src="image" class="p-3"></image>
			<view class="p-2">我的零钱</view>
			<view class="p-2" style="font-size: 25px;">￥{{formatMoney(money)}}</view>
			<view class="p-2" style="font-size: 10px;color: #4ca8f3;" @click="goChangeD">零钱明细</view>
		</view>
		<view>
			<button class="but bg-white">提现</button>
		</view>
		<view class="issue text-center" @click="goIssue">常见问题</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			return {
				money: 0,
				image: app.globalData.Domain_ICON+'/change.png'
			}
		},
		onLoad(options) {
			const money = parseFloat(options.money);
			if (!isNaN(money)) {
				this.money = money;
			} else {
				console.error("无效的金额");
			}
		},
		methods: {
			formatMoney(amount) {
				return amount.toLocaleString(undefined, {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				});
			},
			goChangeD(){
				uni.navigateTo({
					url: `/pages/my/changeDetails`
				});
			},
			goIssue(){
				uni.navigateTo({
					url: `/pages/my/issue`
				});
			}
		}
	}
</script>

<style>
	.marquee-container {
		overflow: hidden;
		height: 30px;
		background-color: #fffbe8;
	}

	.marquee-text {
		white-space: nowrap;
		display: inline-block;
		animation: marquee-animation 15s linear infinite;
		font-size: 14px;
		color: #f37e0c;
	}

	@keyframes marquee-animation {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	image {
		width: 96px;
		height: 96px;
	}

	.but {
		width: 40%;
		height: 35px;
		font-size: 14px;
		border: 1px solid #c0ced8;
		color: #4ca8f3;
	}

	.issue {
		color: #4ca8f3;
		font-size: 10px;
		margin-top: 176px;
	}
</style>